import React, {useRef, useEffect, useState} from 'react';
import { Header } from "antd/es/layout/layout";
import { UserOutlined } from "@ant-design/icons";
import TokenUtils from "../../../utils/tokenUtils";

/**
 * 网站外层 App.js 总体头部
 *
 * @returns {JSX.Element}
 * @constructor
 */
const AppHeader = () => {

    const canvasRef = useRef(null);

    // 当前用户昵称
    const [currentUserNickname, setCurrentUserNickname] = useState("");

    // 粒子背景效果
    useEffect(() => {
        // 获取当前用户昵称
        setCurrentUserNickname(TokenUtils.getCurrentUserInfo().nickname);

        const canvas = canvasRef.current;
        if (!canvas) return;

        const ctx = canvas.getContext('2d');
        let width = canvas.offsetWidth;
        let height = canvas.offsetHeight;

        // 设置canvas尺寸
        const resizeCanvas = () => {
            width = canvas.offsetWidth;
            height = canvas.offsetHeight;
            canvas.width = width;
            canvas.height = height;
        };

        window.addEventListener('resize', resizeCanvas);
        resizeCanvas();

        // 创建粒子
        const particlesArray = [];
        const numberOfParticles = 20;

        class Particle {
            constructor() {
                this.x = Math.random() * width + 20;
                this.y = Math.random() * height + 10;
                this.size = Math.random() * 3;
                this.speedX = Math.random() * 2;
                this.speedY = Math.random();
                this.alpha = Math.random() * 0.2 + 0.1;
            }

            update() {
                this.x += this.speedX;
                this.y += this.speedY;

                // 边界检测
                if (this.x > width) this.x = 0;
                else if (this.x < 0) this.x = width;

                if (this.y > height) this.y = 0;
                else if (this.y < 0) this.y = height;
            }

            draw() {
                // 柔和的粉色粒子，与背景呼应
                ctx.fillStyle = `rgba(255, 240, 245, ${this.alpha + 0.4})`;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

        // 初始化粒子
        const init = () => {
            particlesArray.length = 0;
            for (let i = 0; i < numberOfParticles; i++) {
                particlesArray.push(new Particle());
            }
        };

        // 连接粒子
        const connectParticles = () => {
            for (let a = 0; a < particlesArray.length; a++) {
                for (let b = a; b < particlesArray.length; b++) {
                    const dx = particlesArray[a].x - particlesArray[b].x;
                    const dy = particlesArray[a].y - particlesArray[b].y;
                    const distance = Math.sqrt(dx * dx + dy * dy);

                    if (distance < 60) { // 缩短连接距离，更精致
                        const opacity = 1 - distance / 60;
                        ctx.strokeStyle = `rgba(255, 240, 245, ${opacity * 0.15})`;
                        ctx.lineWidth = 0.3;
                        ctx.beginPath();
                        ctx.moveTo(particlesArray[a].x, particlesArray[a].y);
                        ctx.lineTo(particlesArray[b].x, particlesArray[b].y);
                        ctx.stroke();
                    }
                }
            }
        };

        // 动画循环
        const animate = () => {
            ctx.clearRect(0, 0, width, height);

            for (let i = 0; i < particlesArray.length; i++) {
                particlesArray[i].update();
                particlesArray[i].draw();
            }

            connectParticles();
            requestAnimationFrame(animate);
        };

        init();
        animate();

        // 清理函数
        return () => {
            window.removeEventListener('resize', resizeCanvas);
        };
    }, []);

    return (
        <Header style={{
            height: "64px",
            // 高级粉色渐变（马卡龙风格）
            background: "linear-gradient(135deg, #330066 0%, #6600CC 33%, #6666FF 66%, #9999FF 100%)",
            padding: "0 24px",
            boxShadow: "0 4px 20px rgba(248, 187, 208, 0.25)",
            zIndex: 10,
            display: "flex",
            alignItems: "center",
            justifyContent: "space-between",
            transition: "all 0.3s ease",
            position: "relative",
            overflow: "hidden"
        }}>
            {/* 粒子背景层 */}
            <canvas
                ref={canvasRef}
                style={{
                    position: "absolute",
                    top: 0,
                    left: 0,
                    width: "100%",
                    height: "100%",
                    pointerEvents: "none"
                }}
            />

            {/* 左侧Logo和标题 */}
            <div style={{
                display: "flex",
                alignItems: "center",
                fontSize: "20px",
                fontWeight: "600",
                color: "#ffffff",
                lineHeight: "64px",
                position: "relative",
                textShadow: "0 1px 2px rgba(0, 0, 0, 0.1)"
            }}>
                <div style={{
                    width: "36px",
                    height: "36px",
                    borderRadius: "8px",
                    backgroundColor: "rgba(255, 255, 255, 0.2)",
                    backdropFilter: "blur(8px)",
                    display: "flex",
                    alignItems: "center",
                    justifyContent: "center",
                    marginRight: "12px",
                    fontSize: "18px",
                    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.08)"
                }}>G
                </div>
                gengzp-scaffold-web
                <span style={{
                    marginLeft: "8px",
                    fontSize: "14px",
                    fontWeight: "400",
                    color: "rgba(255, 255, 255, 0.9)"
                }}>控制台</span>
            </div>

            {/* 右侧操作区 - 无背景框 */}
            <div style={{
                display: "flex",
                alignItems: "center",
                gap: "16px",
                position: "relative"
            }}>
                {/* 用户信息 - 无背景框 */}
                <div style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "8px",
                    color: "#fff",
                    cursor: "pointer",
                    padding: "4px 8px",
                    transition: "all 0.3s ease",
                    borderRadius: "20px"
                }}
                     onMouseOver={(e) => {
                         e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.15)";
                     }}
                     onMouseOut={(e) => {
                         e.currentTarget.style.backgroundColor = "transparent";
                     }}>
                    <div style={{
                        width: "32px",
                        height: "32px",
                        borderRadius: "50%",
                        backgroundColor: "rgba(255, 255, 255, 0.25)",
                        display: "flex",
                        alignItems: "center",
                        justifyContent: "center",
                        boxShadow: "inset 0 0 0 1px rgba(255, 255, 255, 0.2)"
                    }}>
                        <UserOutlined style={{ fontSize: "16px", color: "rgba(255, 255, 255, 0.9)" }} />
                    </div>
                    <span style={{ fontSize: "14px", textShadow: "0 1px 2px rgba(0, 0, 0, 0.1)" }}>
                        {currentUserNickname}
                    </span>
                </div>
            </div>
        </Header>
    )
}

export default AppHeader;
